<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>${fileName}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/images/logo.ico">
<script src="/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
    body {
        margin: 0;
        padding: 0 30px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        background-color: #fff;
    }

  	.panel-content-textarea {
        width: 100%;
        height: 100%;
        color: #333;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        font-size: 16px;
    }

    .action-content {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .action-content-main {
        margin-bottom: 20px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    }

    .panel-title {
        padding: 10px 15px;
        border-bottom: 1px solid #0000;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        color: #333;
        background-color: #f5f5f5;
        border-color: #ddd;
        display: flex;
        align-items: center;
    }

    .panel-title-name {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 16px;
        color: inherit;
        margin-right: 28px;
    }

    .panel-content {
        padding: 15px;
        overflow: auto;
    }
</style>
<script type="text/javascript">
    $(function () {
        var offsetH = $(document).height() - 100;
        $('.panel-content').css('height', offsetH + 'px')
        var url = location.search
        var queryParams = parseQueryString(url)
        var currentPage = queryParams.pageNumber - 0
        if (isNaN(currentPage)) {
            currentPage = 0
        }
        if (queryParams.charsetName != null && queryParams.charsetName != '' ) {
            $("#charsetNameId").val(queryParams.charsetName);
        }

        if (queryParams.previewLength != null && queryParams.previewLength != '' ) {
            $("#batchSize").val(queryParams.previewLength);
        }

        var autoLineBreak = localStorage.getItem("autoLineBreak")
        if (autoLineBreak != null && autoLineBreak == "no") {
            $("#demo").css("width","99999px")
            $("#lineBreakId").val("no")
        } else {
            $("#lineBreakId").val("yes")
            $("#demo").css("width","100%")
        }

        function parseQueryString(url) {
            var result = {}
            if (url.indexOf('?') > -1) {
                var str = url.split('?')[1];
                var temp = str.split('&');
                for (var i = 0; i < temp.length; i++) {
                    var temp2 = temp[i].split('=');
                    result[temp2[0]] = temp2[1];
                }
            }
            return result;
        }
        // 上一页
        $('#previous').click(function () {
            if (currentPage <= 0) {
                currentPage = 0
            } else {
                currentPage = currentPage - 1
            }
            goLocation(currentPage)
        })
        // 下一页
        $('#next').click(function () {
            if (currentPage < (Number.parseInt("${totalPage}") - 1)) {
                currentPage = currentPage + 1
                goLocation(currentPage)
            }
        })

        function goLocation(tempCurrentPage) {
            var regex = /&pageNumber=\d+/
            var tempSearch = '';
            if (regex.test(location.search)) {
                tempSearch = location.search.replace(regex, `&pageNumber=${tempCurrentPage}`)
            } else {
                tempSearch = location.search + `&pageNumber=${tempCurrentPage}`
            }

            var path = location.origin + location.pathname + tempSearch
            window.location.href = path
        }
        $("#charsetNameId").change(function () {
            var newCharset = $("#charsetNameId").val();

            if (newCharset != null && newCharset != '') {
                queryParams['charsetName'] =  newCharset
            } else {
                delete queryParams.charsetName
            }

            var path = "?";
            for (const i in queryParams) {
                path = path + i + "=" + queryParams[i] + "&"
            }
            path = path.slice(0, path.length - 1)

            window.location.href = path
        })

        $("#lineBreakId").change(function () {
            var lineBreak = $("#lineBreakId").val();

            if (lineBreak == "yes") {
                localStorage.setItem("autoLineBreak", "yes")
                $("#demo").css("width","100%")
            } else if (lineBreak == "no") {
                localStorage.setItem("autoLineBreak", "no")
                $("#demo").css("width","99999px")
            } else {
                $("#demo").css("width","100%")
            }

        })

        $("#batchSize").blur(function () {
            var batchSize = $("#batchSize").val();

            if (batchSize != null && batchSize != '') {
                queryParams['previewLength'] =  batchSize
            } else {
                delete queryParams.previewLength
            }

            var path = "?";
            for (const i in queryParams) {
                path = path + i + "=" + queryParams[i] + "&"
            }
            path = path.slice(0, path.length - 1)

            window.location.href = path
        })

    })
</script>
</head>

<body style="height: 100vh" oncontextmenu=self.event.returnValue=false>
    <div id="wm_div_id" style="pointer-events: none !important; display: block !important"></div>
    <div class="action-content">
        <div class="action-content-main">
            <div class="panel-title">
                <h4 class="panel-title-name">${fileName}</h4>
                <div class="btn-area">
                    <button id="previous">上一页</button>
                    <button id="current">${currentPage} / ${totalPage}页</button>
                    <button id="next">下一页</button>
                    <button id="total">共${totalPage}页</button>
                    <span style="margin-left: 5px">
                        文件编码： <select id="charsetNameId" name="charsetName">
                        <option name="charsetName" value="">请选择</option>
                        <option name="charsetName" value="gbk">gbk</option>
                        <option name="charsetName" value="utf-8">utf-8</option>
                        </select>
                    </span>

                    <span style="margin-left: 5px">
                        自动换行： <select id="lineBreakId" name="lineBreak" >
                        <option name="lineBreak" value="">请选择</option>
                        <option name="lineBreak" value="yes" selected>是</option>
                        <option name="lineBreak" value="no">否</option>
                        </select>
                    </span>

                    <span style="margin-left: 5px">
                        每页字节数：<input id="batchSize" />
                    </span>

                    <span style="margin-left: 5px">
                        <button onclick="return false" >确定</button>
                    </span>
                </div>
            </div>
            <div class="panel-content">
                <textarea name="demo" id="demo"  style="width: 100%;height: 100%;color: #333;background-color: #f5f5f5;border: 1px solid #ccc;font-size: 16px;" disabled>${textData}</textarea>
            </div>
        </div>
    </div>
</body>
<script src="/js/watermark.js"></script>
<script src="/js/index.js"></script>
</html>